<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		
		<script type="text/javascript">
			window.onload = function() {
				var div = document.getElementsByTagName("div")[0];
				div.addEventListener("click", function() {
					div.style.backgroundColor = "pink";
					// 在function中this代表div元素节点对象
					this.style.width = "400px";
				});
				div.addEventListener("click", function() {
					this.style.height = "400px";
				});
				div.addEventListener("mousemove", over1);
				div.addEventListener("mousemove", over2);
				div.addEventListener("mousemove", over3);
			}
			
			function over1() {
				console.log("over1");
			}
			function over2() {
				console.log("over2");
			}
			function over3() {
				console.log("over3");
			}
			
			function cancel() {
				var div = document.getElementsByTagName("div")[0];
				div.removeEventListener("mousemove", over2);
				div.removeEventListener("mousemove", over3);
			}
		</script>
	</head>
	<body>
		<div style="width: 300px;height: 200px;background-color: red;"></div>
		<input type="button" value="取消"  onclick="cancel()"/>
	</body>
</html>
